<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="修改禁售平台/站点"
    width="800px"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <vxe-grid v-bind="gridOptions">
      <template #product_identification="{ row }">
        <SelectPlatformSite
          v-if="notAdd(row)"
          class="w-full"
          v-model:platform="row.platform_id"
          v-model:site="row.site_code"
          @changePlatform="changePlatform($event, row)"
        >
        </SelectPlatformSite>
        <el-button v-if="row.type === 'add'" @click="handleAddRow"> +添加 </el-button>
      </template>
      <template #operation="{ row, rowIndex }">
        <el-button type="danger" link v-if="notAdd(row)" @click="handleDelete(rowIndex)">
          删除
        </el-button>
      </template>
    </vxe-grid>
    <div>
      注：
      <p>1、新增：在所勾选现有禁售平台/站点数据上新增此次维护的数据；</p>
      <p>2、覆盖：此次维护的数据覆盖所勾选SKU的禁售平台/站点；</p>
    </div>
    <template #footer>
      <div class="footer-btn flex items-center justify-center relative py-2">
        <div class="absolute left-0 top-0">
          <el-radio-group v-model="ids.type" class="ml-4">
            <el-radio :label="1">新增</el-radio>
            <el-radio :label="2">覆盖</el-radio>
          </el-radio-group>
        </div>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import SelectPlatformSite from "@/components/SelectPlatformSite";
import { batchUpdateProhibited } from "../api.js";

const visible = ref(false);
const loading = ref(false);
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);
const ids = ref({
  type: 1,
});
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value[data.name] = data.ids;
  visible.value = true;
};
const notAdd = (row) => row.type !== "add";
const gridOptions = reactive({
  round: true,
  height: "400",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [
    {
      type: "add",
    },
  ],
  columns: [
    {
      field: "product_identification",
      title: "平台/站点",
      align: "center",
      slots: { default: "product_identification" },
    },
    {
      title: "操作",
      width: 90,
      align: "center",
      slots: { default: "operation" },
    },
  ],
});

const changePlatform = (val, item) => {
  item.platform_name = val;
};

const handleAddRow = () => {
  gridOptions.data.splice(-1, 0, {});
};
const handleDelete = (index) => {
  gridOptions.data.splice(index, 1);
};
const save = async () => {
  loading.value = true;
  try {
    let data = getTableData();
    if (!data?.length) return ElMessage.warning("请添加数据");
    const res = await batchUpdateProhibited(Object.assign({}, ids.value, { data: data }));
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
const getTableData = () => {
  const data = gridOptions.data.filter((item) => item.type !== "add");
  return data;
};

const close = async (refresh) => {
  ids.value = {
    type: 1,
  };
  gridOptions.data = [
    {
      type: "add",
    },
  ];
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
